<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <%@include file="/common/ueditor.jsp"%>
    <%@ include file="/common/query.jsp"%>
    <%@ include file="/common/det.jsp"%>
</head>
<body >
<%--<div style="display:none">
    主图:<div><button id="up" class="pure-button" >上传</button><button id="del" class="pure-button">清空</button></div>
</div>--%>
<div>
    商品图片:<div><button id="picUrls" class="pure-button" >上传</button><button id="" class="pure-button">清空</button></div>
</div>
<div style="width: 50%">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this" onclick="switching(true)">PC端</li>
            <li onclick="switching(false)">移动端</li>
        </ul>
    </div>
</div>
<div>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div class="site-demo-button" style="margin-top: 20px;margin-bottom: 10px;">
    <button class="layui-btn site-demo-layedit" data-type="content" onclick="keep()">保存详情</button>
</div>
<script>
    var isPc = true;
    var productId = getQueryStringByDecode("productId");
    $(function () {
        productDetail();
    });
    //切换Pc及移动端
    function switching(switchs){
        isPc = switchs;
        change(isPc);
    }
    function change(pc){
        $.getJSON("${base}/product/manager?search_EQ_id="+productId,function (res) {
            var info = res.data[0];
            if(pc){
                setContent(info.htmlContent);
            }else{
                setContent(info.mobileHtmlContent);
            }
        });
    }
    function productDetail(){
        $.getJSON("${base}/product/manager?search_EQ_id="+productId,function (res) {
            var info = res.data[0];
            if(info.picUrls==""){
                $('#picUrls').val(info.mainPicUrl);
            }else{
                $('#picUrls').val(info.mainPicUrl +","+info.picUrls);
            }
            imgInit($('#up') ,function (url) {
                $.getJSON("${base}/product/updateMainPic?id="+productId+"&url="+url,function (res) {
                    window.location.reload();
                });
            });
            imgsHandler($('#picUrls'),function (url) {
                $.getJSON("${base}/product/updatePics?id="+productId+"&url="+url,function (res) {
                    window.location.reload();
                });
            });
            //<img src="http://47.96.121.149:5555/a4858fdb-5f4b-40b3-a24c-9a9d55001e47.jpeg" onclick="showPic(this)" style="width: 70px;height: 70px;">
            if(info.mainPicUrl!=""){
                $('#picUrls').parent().append('<img src="'+info.mainPicUrl+'" onclick="showPic(this)" style="width: 70px;height: 70px;">');
                if(info.picUrls!="" ){
                    $.each(info.picUrls.split(','),function (index,url) {
                        $('#picUrls').parent().append('<img src="'+url+'" onclick="showPic(this)" style="width: 70px;height: 70px;">')
                    })
                }
            };
            setContent(info.htmlContent);
            layui.use('layedit', function(){
                var layedit = layui.layedit
                        ,$ = layui.jquery;

                layedit.set({
                    uploadImage: {
                        url: '/file/upload?resultType=1' //接口url
                    }
                });



                //编辑器外部操作
/*                var active = {
                    content: function(){
                        $.ajax({
                            type: "POST",
                            url: "/product/updateHtmlContent",
                            data:{
                                id:productId,
                                isPc:isPc,
                                content:layedit.getContent(index)
                            },
                            dataType: "json",
                            success: function (res) {
                                window.location.reload();
                            }
                        });

                    }
                };*/

/*                $('.site-demo-layedit').on('click', function(){
                    $.ajax({
                        type: "POST",
                        url: "/product/updateHtmlContent",
                        data:{
                            id:productId,
                            isPc:isPc,
                            content:getContent()
                        },
                        dataType: "json",
                        success: function (res) {
                            window.location.reload();
                        }
                    });
                    var type = $(this).data('type');
           /!*         active[type] ? active[type].call(this) : '';*!/
                });*/

            });
        });
    }
    function keep(){
        $.ajax({
            type: "POST",
            url: "/product/updateHtmlContent",
            data:{
                id:productId,
                isPc:isPc,
                content:getContent()
            },
            dataType: "json",
            success: function (res) {
                window.location.reload();
            }
        });
    }
    layui.use('element', function(){
        var $ = layui.jquery
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    });
</script>

</body>
</html>